//  9 点图样式
@mixin img9($img, $top, $right, $bottom, $left, $repeat: repeat) {
  border-width: 1px;
  border-style: solid;

  border-image-source: $img; // 图片路径
  border-image-slice: $top $right $bottom $left fill; // 每个区域截取宽度
  border-image-width: $top $right $bottom $left; // 设置各个区域的图片宽度
  border-image-repeat: $repeat; // 图片重复或拉伸模式
  border-image-outset: 1px;
}

// 图片背景
@mixin imgBg($img, $size: 100% 100%, $repeat: no-repeat, $color: transparent) {
  background-image: $img;
  background-size: $size;
  background-repeat: $repeat;
  background-color: $color;
}

// 添加一个伪元素 icon
@mixin beforeIcon($size, $color, $left: null) {
  @if $left == null {
    $left: $size;
  }

  position: relative;

  &::before {
    display: block;
    content: '';
    position: absolute;
    left: $left;
    top: 50%;
    width: $size;
    height: $size;
    background-color: $color;
    transform: rotateZ(45deg) translate(0, -50%);
  }
}

